<template>
	<view>
		<!-- 轮播图 -->
		<u-swiper :list=" slides" name="img_url" height="320">
		</u-swiper>
		<!-- 分类栏 -->
		<view class="u-text-center u-m-t-20">
			<u-tabs :list="sortList" :is-scroll="false" :current="currentSort" @change="changeSort">
			</u-tabs>
		</view>
		<!-- 主体内容 -->
		<u-row gutter="16" class=" u-skeleton">
			<u-col span="6" v-for="goods in goodsList.length!==0?goodsList:[{},{},{},{}]">
				<goods-card :goods="goods" />
			</u-col>
		</u-row>
		<!-- 骨架屏-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import GoodsCard from '../../components/goods-card/goods-card.vue'
	export default {
		comments: {
			GoodsCard
		},
		data() {
			return {
				sortList: [{
					name: '默认'
				}, {
					name: '销量'
				}, {
					name: '推荐'
				}, {
					name: '最新'
				}],
				currentSort: 0,
				slides: [],
				goodsList: [],
				page: 1,
				loading: false
			}
		},

		onLoad() {
			this.getData()

		},
		methods: {
			changeSort(index) {
				this.currentSort = index;
				// 判断筛选条件
				// 这个请求之前应该把商品和分页置空
				this.page = 1
				this.goodsList = []
				this.getData()
			},
			//获取数据
			async getData() {
				this.loading = true //显示骨架屏
				const params = {
					page: this.page
				}
				// 增加排序条件
				if (this.currentSort === 1) params.sales = 1
				if (this.currentSort === 2) params.recommend = 1
				if (this.currentSort === 3) params.new = 1
				const res = await this.$u.api.index(params)
				console.log(res)
				this.loading = false //隐藏骨架屏
				this.slides = res.slides
				this.goodsList = [
					...this.goodsList,
					...res.goods.data
				]


			}
		},
		// 触底事件
		onReachBottom() {
			// 重新请求数据，带上分页的参数
			this.page += 1
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>

</style>
